<template>
  <div style="color: #666; font-size: 14px">
    <el-card style="width: 100%">
      <p>
        <span style="color:rgb(245, 34, 45);">{{user.nickname}}(管理员)</span>，您好。
        欢迎使用后台管理系统！

      </p>
      <p>
        以下是平台用户使用情况统计，后续功能正在开发。
      </p>
    </el-card>
    <el-col>
    <el-row :gutter="24" style="margin-top: 50px">

      <el-col :span="24" style="margin-top: 10px;display: flex;justify-content: space-around">
        <div id="main" style="width: 100%; height: 450px"></div>
      </el-col>


    </el-row>
    </el-col>

  </div>
</template>

<script>
/*图标开源库*/
import * as echarts from 'echarts';
export default {
  name: "Home",
  data() {
    return {
      nickname: "",
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      username: "",
      email: "",
      address: "",
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      roles: [],
      user: localStorage.getItem("user")
          ? JSON.parse(localStorage.getItem("user"))
          : {},
    };
  },

  mounted() {

    const chartDom = document.getElementById('main');
    const myChart = echarts.init(chartDom);
    let option;

    option = {
      title: {
        text: '不同类型资源统计情况饼图',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: []
        }
      ]
    };
    this.request.get("/item/count").then(res => {
      res.data.forEach(item => {
        option.series[0].data.push(item)
      })
      option && myChart.setOption(option);
    })
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/user/count/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
        }
      }).then(res => {

        this.tableData = res.data.records
        this.total = res.data.total

      })

      this.request.get("/role").then(res => {
        this.roles = res.data
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },

  }
}


</script>

<style>

</style>

